<template>
	<view class="btn-box" :style="[paddingBottomStyle]">
		<button class="btn btn-transition-scale95" @click="handleDelete()">删 除</button>
		<button class="btn active btn-transition-scale95" @click="handleEdit()">编 辑</button>
	</view>
</template>

<script setup>
	import api from "@/api/index.js";
	
	const props = defineProps({
		detail: { // 详情
			type: Object,
			default: () => ({})
		},
	});

	const paddingBottomStyle = {
		'paddingBottom': getApp().globalData.safeAreaBottom > 0 ?
			getApp().globalData.safeAreaBottom + 'px' : '40rpx'
	};

	// 删除
	const handleDelete = () => {
		uni.showModal({
			title: '提示',
			content: '您确定要删除这个需求吗?',
			success: async (res) => {
				if (!res.confirm) return;
				uni.showLoading({ title: '删除中...', mask: true });
				await api.c_need_api.delete({id: props.detail.id}).finally(() => setTimeout(uni.hideLoading, 100));
				uni.$emit('refresh-my-needs-page'); // 刷新列表
				uni.showSuccessToast('删除成功', () => {
					uni.navigateBack();
				});
			}
		})
	}

	// 编辑
	const handleEdit = () => {
		uni.redirectTo({
			url: '/pagesC-post/need/index?id=' + props.detail.id
		});
	}
</script>

<style lang="scss" scoped>
	.btn-box {
		display: flex;
		justify-content: center;
		padding: 80rpx 45rpx 0;

		.btn {
			width: 40%;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #222;
			text-align: center;
			line-height: 88rpx;
			background-color: transparent;

			&+.btn {
				margin-left: 40rpx;
			}

			&::after {
				display: block;
				border: 1px solid #999;
				border-radius: 100px;
			}

			&.active {
				color: white;
				background-color: #FE3333;

				&::after {
					display: none;
				}
			}
		}
	}
</style>